<template>
  <div>
    <canvas id="refPlayer" ref="refPlayer" class="mh-canvas"></canvas>
    <div class="play-list" v-if="playList">
      <div class="play-items" v-for="(item, index) in playList" :key="item" @click="play_list(item, index)"> {{ item }}
      </div>
    </div>
    <div class="play-control">
      <button type="primary" ref="btnOpen">
        打开文件夹
      </button>
      <button type="primary" ref="btnStop">
        停止
      </button>
      <button type="primary" ref="btnPlay">
        播放
      </button>
      <button type="primary" ref="btnPrev">
        上一曲
      </button>
      <button type="primary" ref="btnNext">
        下一曲
      </button>
      <span class="mh-span" id="time"></span>
      <input class="mh-input" type="range" max="100" value="100" min="0" step="0.2" id="vol">
      <!-- 动态改变 -->
      <select value="pole" id="refStyleChange">
        <option name="pole" value="pole" id="pole">柱状图</option>
        <option name="ring" value="ring" id="ring">圆环</option>
      </select>
    </div>
  </div>
</template>
<script setup>
import AudioPlayer from '@/lib/js/player.js';
import { nextTick, onMounted, ref } from 'vue';
const refPlayer = ref(null);
const btnOpen = ref(null);
const btnStop = ref(null);
const btnPlay = ref(null);
const btnPrev = ref(null);
const btnNext = ref(null);

const playList = ref(null);


var _ps = null;
function play_list(ev, index) {
  if (_ps && ev) {
    _ps.play({
      file: ev[1],
      name: ev[0],
      index
    }, true);
  }
}
onMounted(() => {
  nextTick(() => {
    AudioPlayer.create({
      control: {
        open: btnOpen.value,
        stop: btnStop.value,
        pause: btnPlay.value,
        next: btnNext.value,
        prev: btnPrev.value
      },
      canvas: {
        width: 1600,
        height: 800,
        el: refPlayer.value
      },
      timeUpdate(ev) {
        this.$("#time").innerText = `${ev[0]}:${ev[1]}:${ev[2]}`;
      },
      playStateChange(btn, state) {
        btn.innerText = state ? '暂停' : '播放'
      },
      volumn: "#vol",
      listUpdate: function (list) {
        playList.value = list;
      },
      onMounted(e) {
        _ps = this;
        this.$("#refStyleChange")
          .onchange = function () {
            if (e) {
              e.setEffect(this.value);
            }
          }
      }
    });
  });

});
</script>

<style scoped></style>
